<template>
  <div class="detail-page">
    <Header/>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <div class="loading-spinner"></div>
      <p>加载中...</p>
    </div>

    <!-- 错误提示 -->
    <div v-else-if="error" class="error-container">
      <i class="el-icon-warning-outline"></i>
      <p>{{ error }}</p>
      <button @click="fetchData">重试</button>
    </div>
    <div v-else class="detail-container">
      <!-- 面包屑导航 -->
      <div class="breadcrumb">
        <router-link to="/">
          <i class="fas fa-home"></i>
          首页
        </router-link>
        <span class="separator">/</span>
        <router-link :to="`/category/${articleData.categoryId}`">
          <i class="fas fa-folder"></i>
          {{ articleData.categoryName }}
        </router-link>
      </div>

      <div class="content-wrapper">
        <!-- 左侧内容区 -->
        <div class="main-content">
          <!-- 文章主体卡片 -->
          <div class="article-card">
            <!-- 文章标题 -->
            <h1 class="article-title">{{ articleData.title }}</h1>

            <!-- 文章元信息 -->
            <div class="article-meta">
              <div class="meta-left">
                <span class="time">
                  <i class="el-icon-time"></i>
                  {{ formatDate(articleData.createTime) }}
                </span>
                <span class="category">
                  <i class="el-icon-folder"></i>
                  {{ articleData.categoryName }}
                </span>
                <span class="views">
                  <i class="el-icon-view"></i>
                  {{ articleData.viewCount }}
                </span>
              </div>

            </div>

            <!-- 文章内容 -->
            <div class="article-content markdown-body" v-html="articleData.content"></div>

            <!-- 文章标签 -->
            <div class="article-tags">
              <i class="fas fa-tags"></i>
              <div class="tags-list">
                <span class="tag" v-for="tag in articleData.tagNames" :key="tag">{{ tag }}</span>
              </div>
            </div>

            <!-- 文章底部操作栏 -->
            <div class="article-footer">
              <div class="footer-left">
                <div class="author-info">
                  <img :src="articleData.userInfo.avatar" alt="avatar" class="author-avatar">
                  <span class="author-name">{{ articleData.userInfo.nickname }}</span>
                </div>
              </div>
              <div class="footer-right">
                <div class="action-item" @click="handleShare">
                  <i class="el-icon-share"></i>
                  <span>分享</span>
                </div>
                <div class="action-item" @click="handleLike">
                  <i class="el-icon-thumb" :class="{ active: articleData.liked }"></i>
                  <span>({{ articleData.likeCount }})</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 文章声明 -->
          <div class="article-declaration">
            <div class="declaration-title">
              <i class="fas fa-info-circle"></i>
              <span>声明</span>
            </div>
            <div class="declaration-content">
              <p>{{ detailContent.title }}</p>
              <div class="contact-info">
                <span v-for="con in detailContent.contact">{{ con.title }}<a :href="con.link">{{con.link}}</a></span>
              </div>
            </div>
          </div>

          <!-- 文章导航 -->
          <div class="article-navigation">
            <div class="nav-item prev" v-if="prevArticle" @click="handleNavClick(prevArticle)">
              <i class="fas fa-arrow-left"></i>
              <div class="nav-content">
                <span class="nav-label">上一篇</span>
                <span class="nav-title">{{ prevArticle.title }}</span>
              </div>
            </div>
            <div class="nav-item next" v-if="nextArticle" @click="handleNavClick(nextArticle)">
              <div class="nav-content">
                <span class="nav-label">下一篇</span>
                <span class="nav-title">{{ nextArticle.title }}</span>
              </div>
              <i class="fas fa-arrow-right"></i>
            </div>
          </div>
        </div>

        <!-- 右侧边栏 -->
        <div class="sidebar">
          <!-- 最新项目 -->
          <div class="sidebar-section">
            <div class="section-header">
              <h3>最新项目</h3>
            </div>
            <div class="recent-list">
              <div v-for="(article, index) in recentArticles"
                   :key="index"
                   class="recent-item"
                   @click="handleArticleClick(article)">
                <div class="recent-title title-ellipsis" :title="article.title">{{ article.title }}</div>
                <div class="recent-meta">
                  <span class="time">{{ formatDate(article.createTime) }}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 推荐文章 -->
          <div class="sidebar-section">
            <div class="section-header">
              <h3>推荐文章</h3>
            </div>
            <div class="showcase-list">
              <div v-for="(article, index) in recommendArticles"
                   :key="index"
                   class="showcase-item"
                   @click="handleArticleClick(article)">
                <div class="showcase-image">
                  <img v-lazy="article.cover" :alt="article.title">
                </div>
                <div class="showcase-info">
                  <div class="showcase-title title-ellipsis" :title="article.title">{{ article.title }}</div>
                  <div class="showcase-meta">
                    <span class="time">{{ formatDate(article.createTime) }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 排行榜展示 -->
          <div class="sidebar-section">
            <div class="section-header">
              <h3>排行榜展示</h3>
            </div>
            <div class="ranking-list">
              <div v-for="(article, index) in rankingArticles"
                   :key="index"
                   class="ranking-item"
                   @click="handleArticleClick(article)">
                <div class="ranking-number">{{ index + 1 }}</div>
                <div class="ranking-info"
                     style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;">
                  <div class="ranking-title title-ellipsis" :title="article.title">{{ article.title }}</div>
                  <div class="views-container" style="display: flex; gap: 10px; margin-left: auto;">
                    <!-- 点赞数 -->
                    <span class="views" style="font-size: 10px;">
                      <i class="el-icon-star-off"></i>{{ article.likeCount }}
                    </span>
                    <!-- 浏览量 -->
                    <span class="views" style="font-size: 10px;">
                      <i class="el-icon-view"></i>{{ article.viewCount }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 相关文章推荐 -->
      <div class="related-section">
        <div class="section-header">
          <h3>相关推荐</h3>
        </div>
        <div class="related-grid">
          <content-card
              v-for="(item, index) in correlationRecommendArticles"
              :key="item.id"
              :item="item"
              @click="handleArticleClick"
              @imageLoad="handleImageLoad(index)"
              :title="item.title"
              class="title-ellipsis"/>
        </div>
      </div>
    </div>
    <SideMenu/>
    <Footer/>
  </div>
</template>

<script>
import Header from '@/components/layout/Header.vue'
import Footer from '@/components/layout/Footer.vue'
import ContentCard from '@/components/common/ContentCard.vue'
import SideMenu from "@/components/SideMenu.vue";
import {getArticleById, getDataObject} from '@/api/portalAPI'

import {formatDate} from '@/utils/toolUtils'
import constantsData from "@/constants";

export default {
  name: 'Detail',
  components: {
    SideMenu,
    Header,
    Footer,
    ContentCard
  },
  data() {
    return {
      loading: true,
      error: null,
      detailContent: JSON.parse(constantsData().detailContent),
      articleData: {
        id: 1,
        title: '',
        categoryName: '',
        categoryId: '',
        createTime: '',
        viewCount: '',
        likeCount: '',
        liked: false,
        content: '',
        tagNames: [],
        userInfo: {
          nickname: '',
          avatar: ''
        }
      },
      recentArticles: [],
      recommendArticles: [],
      rankingArticles: [],
      prevArticle: null,
      nextArticle: null,
      correlationRecommendArticles: []
    }
  },
  methods: {
    formatDate,
    handleShare() {
      this.$message({
        message: '分享功能开发中...',
        type: 'info'
      });
    },

    handleLike() {
      this.articleData.liked = !this.articleData.liked;
      this.articleData.likes = this.articleData.liked
          ? String(parseInt(this.articleData.likes) + 1)
          : String(parseInt(this.articleData.likes) - 1);

      this.$message({
        message: this.articleData.liked ? '点赞成功' : '已取消点赞',
        type: this.articleData.liked ? 'success' : 'info'
      });
    },

    handleArticleClick(article) {
      this.$router.push(`/detail/${article.id}`)
    },

    handleImageLoad(index) {
      setTimeout(() => {
        this.$set(this.correlationRecommendArticles[index], 'loaded', true)
      }, 100)
    },

    handleNavClick(item) {
      this.$router.push(`/detail/${item.id}`);
    },

    // 处理富文本内容
    handleRichTextContent() {
      this.$nextTick(() => {
        const content = this.articleData.content;
        if (!content) return;

        const articleContent = this.$el.querySelector('.article-content');
        if (articleContent) {
          // 处理图片
          const images = articleContent.getElementsByTagName('img');
          Array.from(images).forEach(img => {
            img.style.maxWidth = '100%';
            img.style.height = 'auto';

            img.onerror = () => {
              img.style.display = 'none';
            };
          });

          // 处理表格
          const tables = articleContent.getElementsByTagName('table');
          Array.from(tables).forEach(table => {
            const wrapper = document.createElement('div');
            wrapper.style.overflowX = 'auto';
            wrapper.style.width = '100%';
            table.parentNode.insertBefore(wrapper, table);
            wrapper.appendChild(table);
          });
        }
      });
    },
    async getDataObjectL() {
      try {
        const categoryId = this.articleData.categoryId;
        const {
          code,
          data: {
            recommendArticles,
            recentArticles,
            rankingArticles,
            correlationRecommendArticles
          },
          msg
        } = await getDataObject({categoryId});

        // 确保 code 为 0 表示成功
        if (code === 0) {
          this.recentArticles = recentArticles;
          this.recommendArticles = recommendArticles;
          this.rankingArticles = rankingArticles;
          this.correlationRecommendArticles = correlationRecommendArticles;
        } else {
          console.error("错误代码:", code, "消息:", msg);
        }
      } catch (error) {
        console.error("获取数据时发生错误:", error);
      }
    },
    // 获取模拟数据
    async getMockData() {
      const id = this.$route.params.id;
      const {code, data, msg} = await getArticleById({id});
      if (code !== 0) {
        return;
      }
      // 文章详情
      this.articleData = data;
      this.prevArticle = null;
      this.nextArticle = null;

      this.getDataObjectL();
      if (data['previousArticle']) {
        const prev = data['previousArticle'].split("*X*X*");
        this.prevArticle = {id: prev[1], title: prev[0]};
      }

      if (data['nextArticle']) {
        const next = data['nextArticle'].split("*X*X*");
        this.nextArticle = {id: next[1], title: next[0]};
      }

    },

    async fetchData() {
      try {
        this.loading = true;
        this.error = null;
        await this.getMockData();

        // 更新页面标题
        document.title = `${this.articleData.title} - 详情`;
      } catch (err) {
        this.error = '加载失败，请稍后重试';
        console.error('获取详情数据失败:', err);
      } finally {
        this.loading = false;
      }
    }
  },

  created() {
    this.fetchData();
  },

  mounted() {
    this.handleRichTextContent();
  },

  watch: {
    '$route.params.id': {
      handler() {
        this.fetchData();
      }
    },
    'articleData.content': {
      handler() {
        this.$nextTick(() => {
          this.handleRichTextContent();
        });
      }
    }
  }
};
</script>

<style scoped>
/* 主题变量定义 */
:root {
  --bg-primary: #f7f9fc;
  --bg-secondary: #fff;
  --text-primary: #1a1a1a;
  --text-secondary: #666;
  --text-tertiary: #999;
  --border-color: #f0f0f0;
  --hover-color: #e6f7ff;
  --primary-color: #1890ff;
  --shadow-color: rgba(0, 0, 0, 0.03);
}

[data-theme='dark'] {
  --bg-primary: #1a1a1a;
  --bg-secondary: #2a2a2a;
  --text-primary: #fff;
  --text-secondary: #bbb;
  --text-tertiary: #888;
  --border-color: #404040;
  --hover-color: #1f1f1f;
  --primary-color: #177ddc;
  --shadow-color: rgba(0, 0, 0, 0.2);
}

/* 更新需要主题切换的样式 */
.detail-page {
  position: relative;
  min-height: 100vh;
  background: var(--bg-primary);
  padding-top: 10px;
}

/* 内容容器 */
.detail-container {
  max-width: 2000px;
  margin: 0 auto;
  padding: 0 40px;
}

/* 加载状态 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: 40px;
  background: var(--card-bg);
  border-radius: 8px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #f0f7ff;
  border-top: 3px solid #1890ff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  box-shadow: 0 2px 10px rgba(24, 144, 255, 0.1);
  margin-bottom: 15px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 错误状态 */
.error-container {
  text-align: center;
  padding: 40px;
  color: #ff4d4f;
  background: var(--card-bg);
  border-radius: 8px;
}

/* 内容包装器 */
.content-wrapper {
  display: flex;
  gap: 30px;
}

/* 主内容区优化 */
.main-content {
  flex: 1;
  min-width: 0;
}

/* 文章区域整体优化 */
.article-card {
  background: var(--card-bg);
  border-radius: 8px;
  padding: 30px 40px;
  margin-bottom: 25px;
  box-shadow: 0 2px 15px var(--shadow-color);
  color: var(--text-color);
}

/* 文章标题区域 */
.article-title {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 20px;
  line-height: 1.5;
}

/* 文章元信息区域 */
.article-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
  margin-bottom: 25px;
  border-bottom: 1px solid var(--border-color);
}

.meta-left {
  display: flex;
  align-items: center;
  gap: 24px;
}

.meta-left span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text-secondary);
  transition: all 0.3s;
}

.meta-left i {
  font-size: 16px;
  color: var(--text-tertiary);
}

/* 文章内容区域 */
.article-content {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-primary);
  margin: 30px 0;
}

.markdown-body {
  h1, h2, h3, h4, h5, h6 {
    margin: 1.5em 0 1em;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-primary);
  }

  h2 {
    font-size: 22px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
  }

  h3 {
    font-size: 18px;
  }

  p {
    margin: 1em 0;
    line-height: 1.8;
  }

  code {
    background: var(--code-bg);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: Consolas, Monaco, 'Andale Mono', monospace;
    font-size: 14px;
    color: var(--text-secondary);
  }

  pre {
    background: var(--code-bg);
    padding: 20px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 16px 0;
  }

  img {
    max-width: 100%;
    border-radius: 8px;
    margin: 16px 0;
  }

  blockquote {
    margin: 16px 0;
    padding: 0 16px;
    color: var(--text-secondary);
    border-left: 4px solid #42b983;
    background: var(--bg-tertiary);
  }
}

/* 文章标签区域 */
.article-tags {
  background: var(--card-bg);
  padding: 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 30px 0;
}

.article-tags i {
  font-size: 16px;
  color: var(--text-tertiary);
}

.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  padding: 6px 16px;
  background: var(--bg-tertiary);
  border-radius: 20px;
  font-size: 13px;
  color: var(--text-secondary);
  transition: all 0.3s;
  border: 1px solid var(--border-color);
}

.tag:hover {
  background: var(--hover-color);
  color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: 0 2px 8px var(--shadow-color);
}

/* 文章声明区域 */
.article-declaration {
  background: var(--card-bg);
  border-radius: 8px;
  padding: 20px;
  border: 1px solid var(--border-color);
  margin: 30px 0;
}

.declaration-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.declaration-content {
  color: var(--text-secondary);
  line-height: 1.6;
}

.contact-info {
  margin-top: 12px;
  display: flex;
  gap: 20px;
  color: var(--text-secondary);
}

.contact-info a {
  color: var(--primary-color);
  text-decoration: none;
}

.contact-info a:hover {
  text-decoration: underline;
}

/* 文章底部区域 */
.article-footer {
  background: var(--card-bg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
}

.author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
}

.footer-right {
  display: flex;
  gap: 16px;
}

.action-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 20px;
  background: var(--hover-color);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.3s;
}

.action-item:hover {
  background: var(--primary-color);
  color: white;
}

.action-item.active {
  background: var(--hover-color);
  color: var(--primary-color);
}

/* 文章导航 */
.article-navigation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 30px 0;
}

.nav-item {
  background: var(--card-bg);
  padding: 20px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-item:hover {
  background: var(--hover-color);
  border-color: var(--primary-color);
  transform: translateY(-3px);
  box-shadow: 0 5px 20px var(--shadow-color);
}

.nav-item.prev {
  text-align: left;
}

.nav-item.next {
  text-align: right;
  flex-direction: row-reverse;
}

.nav-content {
  flex: 1;
  min-width: 0;
}

.nav-label {
  font-size: 16px;
  color: var(--text-tertiary);
  margin-bottom: 6px;
  display: block;
  text-align: center;

}

.nav-title {
  font-size: 14px;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

.nav-item i {
  background: linear-gradient(135deg, #f5f6f7, #fff);
  box-shadow: 0 2px 8px var(--shadow-color);
}

.nav-item:hover i {
  background: linear-gradient(135deg, var(--primary-color), #36cfc9);
  box-shadow: 0 2px 8px var(--shadow-color);
}

/* 右侧边栏美化 */
.sidebar {
  width: 400px;
  flex-shrink: 0;
}

.sidebar-section {
  background: var(--card-bg);
  border-radius: 12px;
  margin-bottom: 25px;
  box-shadow: 0 2px 15px var(--shadow-color);
  overflow: hidden;
  transition: all 0.3s;
}

.section-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
  position: relative;
}

.section-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  padding-left: 12px;
}

.section-header h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  background: var(--primary-color);
  border-radius: 2px;
}

/* 最新项目列表优化 */
.recent-list {
  padding: 15px 20px;
}

.recent-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.3s;
}

.recent-item:hover {
  padding-left: 10px;
  background: var(--bg-tertiary);
}

.recent-item:last-child {
  border-bottom: none;
}

.recent-title {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.recent-meta {
  font-size: 12px;
  color: var(--text-tertiary);
}

/* 推荐文章列表优化 */
.showcase-list {
  padding: 15px 20px;
}

.showcase-item {
  display: flex;
  gap: 15px;
  padding: 12px 0;
  cursor: pointer;
  transition: all 0.3s;
}

.showcase-item:hover {
  padding-left: 10px;
  background: var(--bg-tertiary);
}

.showcase-image {
  width: 120px;
  height: 80px;
  overflow: hidden;
}

.showcase-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.showcase-info {
  flex: 1;
  min-width: 0;
}

.showcase-title {
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.showcase-meta {
  font-size: 12px;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 排行榜展示样式 */
.ranking-list {
  padding: 15px;
}

.ranking-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 15px;
  margin: 8px;
  border-radius: 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  transition: all 0.3s;
  overflow: hidden;
}

.ranking-title {
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90%;
}

.ranking-meta {
  font-size: 12px;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
}

.ranking-number {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-secondary);
  border-radius: 8px;
  box-shadow: 0 2px 8px var(--shadow-color);
}

.ranking-item:hover {
  background: var(--hover-color);
  border-color: var(--primary-color);
  transform: translateX(5px);
}

.main-content {
  padding: 0px;
}

/* 相关推荐区域完整样式 */
.related-section {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 20px;
  margin-top: 20px;
  box-shadow: 0 2px 15px var(--shadow-color);
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

.section-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  position: relative;
  padding-left: 12px;
}

.section-header h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  background: var(--primary-color);
  border-radius: 2px;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  margin-top: 20px;
  max-width: 100%;
}

/* ContentCard组件样式补充 */
.content-card {
  background: var(--bg-secondary);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s;
  box-shadow: 0 2px 10px var(--shadow-color);
  border: 1px solid var(--border-color);
}

.content-card:hover {
  transform: translateY(-5px);
  border-color: var(--primary-color);
  box-shadow: 0 5px 20px var(--shadow-color);
}

.card-image {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden;
}

.card-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.content-card:hover .card-image img {
  transform: scale(1.05);
}

.card-content {
  padding: 15px;
  background: var(--bg-secondary);
}

.card-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.4;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 40px;
}

.card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-tertiary);
}

.meta-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.meta-item i {
  font-size: 14px;
}

/* 响应式布局补充 */
@media (max-width: 768px) {
  .related-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .main-content {
    padding: 0px;
    gap: 15px;
  }

  .card-content {
    padding: 10px;
  }

  .card-title {
    font-size: 13px;
    height: 36px;
    margin-bottom: 6px;
  }

  .card-meta {
    font-size: 11px;
  }

  .meta-info {
    gap: 8px;
  }

  .meta-item i {
    font-size: 12px;
  }

  .article-navigation {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .nav-item {
    padding: 12px 15px;
  }

  .nav-title {
    font-size: 13px;
  }

  .ranking-item {
    padding: 10px 0;
  }

  .ranking-number {
    width: 20px;
    height: 20px;
    font-size: 11px;
  }

  .ranking-title {
    font-size: 12px;
  }

  .ranking-meta {
    font-size: 11px;
  }

  .ranking-info {
    flex-direction: column;
    align-items: flex-start;
  }

  .ranking-title {
    margin-bottom: 5px;
  }
}

/* 加载状态补充 */
.card-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-loading .loading-spinner {
  width: 30px;
  height: 30px;
}

/* 图片懒加载过渡效果 */
.lazy-image-enter-active,
.lazy-image-leave-active {
  transition: opacity 0.3s;
}

.lazy-image-enter,
.lazy-image-leave-to {
  opacity: 0;
}

/* 标签样式补充 */
.article-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0;
}

.tag {
  padding: 6px 15px;
  background: var(--bg-tertiary);
  border-radius: 20px;
  font-size: 12px;
  color: var(--text-secondary);
  transition: all 0.3s;
  border: 1px solid var(--border-color);
}

.tag:hover {
  background: var(--hover-color);
  color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: 0 2px 8px var(--shadow-color);
}

/* 文章底部操作栏补充 */
.article-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.footer-right {
  display: flex;
  gap: 15px;
}

.action-button {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.action-button.primary {
  background: var(--primary-color);
  color: #fff;
}

.action-button.primary:hover {
  background: #40a9ff;
}

.action-button.default {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.action-button.default:hover {
  background: #e6e6e6;
}

/* 作者信息补充 */
.author-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
}

.author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

/* 交互反馈优化 */
.action-item {
  padding: 8px 16px;
  border-radius: 20px;
  background: var(--hover-color);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.3s;
}

.action-item:hover {
  background: var(--primary-color);
  color: white;
}

.action-item.active {
  background: var(--hover-color);
  color: var(--primary-color);
}

/* 确保层级关系正确 */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #fff;
  box-shadow: 0 1px 3px var(--shadow-color);
}

.side-menu {
  z-index: 999;
}

.footer {
  position: relative;
  z-index: 1;
  margin-top: 40px;
}

/* 优化面包屑导航 */
.breadcrumb {
  background: var(--card-bg);
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px var(--shadow-color);
}

.breadcrumb a {
  color: var(--text-secondary);
  font-size: 14px;
  transition: color 0.3s;
}

.breadcrumb a:hover {
  color: var(--primary-color);
}

.separator {
  margin: 0 8px;
  color: var(--border-color);
}

/* 排行榜展示样式 */
.ranking-list {
  padding: 15px;
}

.ranking-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 15px;
  margin: 8px;
  border-radius: 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  transition: all 0.3s;
}

.ranking-item:hover {
  background: var(--hover-color);
  border-color: var(--primary-color);
  transform: translateX(5px);
}

.ranking-number {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-secondary);
  border-radius: 8px;
  box-shadow: 0 2px 8px var(--shadow-color);
}

.ranking-item:nth-child(-n+3) .ranking-number {
  color: #fff;
  background: linear-gradient(135deg, var(--primary-color), #36cfc9);
}

.ranking-info {
  flex: 1;
  min-width: 0;
}

.ranking-title {
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90%;
}

.ranking-meta {
  font-size: 12px;
  color: var(--text-tertiary);
}

/* 文章导航样式优化 */
.article-navigation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 30px 0;
}

.nav-item {
  background: var(--card-bg);
  padding: 20px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-item:hover {
  background: var(--hover-color);
  border-color: var(--primary-color);
  transform: translateY(-3px);
  box-shadow: 0 5px 20px var(--shadow-color);
}

.nav-item.prev {
  text-align: left;
}

.nav-item.next {
  text-align: right;
  flex-direction: row-reverse;
}

.nav-content {
  flex: 1;
  min-width: 0;
}

.nav-label {
  font-size: 18px;
  color: var(--text-tertiary);
  margin-bottom: 6px;
  display: block;
  text-align: center;
}

.nav-title {
  font-size: 14px;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

.nav-item i {
  background: linear-gradient(135deg, #f5f6f7, #fff);
  box-shadow: 0 2px 8px var(--shadow-color);
}

.nav-item:hover i {
  background: linear-gradient(135deg, var(--primary-color), #36cfc9);
  box-shadow: 0 2px 8px var(--shadow-color);
}

/* 移动端布局优化 */
@media (max-width: 768px) {
  /* 容器布局优化 */
  .detail-container {
    padding: 0 12px;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
  }

  /* 内容包装器优化 */
  .content-wrapper {
    flex-direction: column;
    gap: 15px;
  }

  /* 主内容区优化 */
  .main-content {
    width: 100%;
    padding: 0;
  }

  /* 文章卡片优化 */
  .article-card {
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 8px;
  }

  /* 文章标题调整 */
  .article-title {
    font-size: 20px;
    margin-bottom: 15px;
  }

  /* 文章元信息优化 */
  .article-meta {
    flex-direction: column;
    gap: 10px;
    padding: 10px 0;
  }

  .meta-left {
    width: 100%;
    justify-content: space-between;
    font-size: 12px;
  }

  /* 文章内容区域优化 */
  .article-content.markdown-body {
    margin: 15px 0;
    font-size: 15px;

    h1 {
      font-size: 20px;
    }

    h2 {
      font-size: 18px;
    }

    h3 {
      font-size: 16px;
    }

    img, video, iframe {
      max-width: 100% !important;
      height: auto !important;
      margin: 10px 0;
    }

    table {
      display: block;
      width: 100% !important;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      margin: 10px 0;
    }

    pre {
      padding: 12px;
      font-size: 13px;
      white-space: pre-wrap;
    }

    blockquote {
      margin: 10px 0;
      padding: 10px 15px;
    }
  }

  /* 标签区域优化 */
  .article-tags {
    padding: 10px;
    margin: 15px 0;
  }

  .tag {
    padding: 4px 12px;
    font-size: 12px;
  }

  /* 文章声明区域优化 */
  .article-declaration {
    padding: 15px;
    margin: 15px 0;
  }

  .contact-info {
    flex-direction: column;
    gap: 8px;
  }

  /* 文章底部区域优化 */
  .article-footer {
    flex-direction: column;
    gap: 15px;
    padding: 15px 0;
  }

  .footer-left, .footer-right {
    width: 100%;
    justify-content: center;
  }

  /* 侧边栏优化 */
  .sidebar {
    width: 100%;
    margin-top: 15px;
  }

  /* 相关推荐区域优化 */
  .related-section {
    padding: 15px;
    margin: 15px 0;
  }

  .related-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  /* 文章导航优化 */
  .article-navigation {
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 15px 0;
  }

  .nav-item {
    padding: 12px;
  }

  .nav-label {
    font-size: 14px;
  }

  .nav-title {
    font-size: 13px;
  }

  /* 排行榜优化 */
  .ranking-item {
    padding: 10px;
    margin: 5px;
  }

  .ranking-title {
    font-size: 13px;
  }
}

/* 超小屏幕额外优化 */
@media (max-width: 375px) {
  .detail-container {
    padding: 0 8px;
  }

  .article-card {
    padding: 12px;
  }

  .article-title {
    font-size: 18px;
  }

  .article-content.markdown-body {
    font-size: 14px;
  }

  .meta-left {
    flex-wrap: wrap;
    gap: 8px;
  }

  .related-grid {
    grid-template-columns: 1fr;
  }

  .action-item {
    padding: 6px 12px;
    font-size: 12px;
  }
}

/* 安全区域适配 */
@supports (padding: env(safe-area-inset-bottom)) {
  .detail-container {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* 触摸设备优化 */
@media (hover: none) {
  .action-item,
  .nav-item,
  .tag {
    -webkit-tap-highlight-color: transparent;
  }

  .action-item:active,
  .nav-item:active {
    opacity: 0.8;
  }
}

.title-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
</style>
